import React, { useState, useEffect } from 'react';
import 'antd/dist/antd.css'
import '../css/index.scss'
import Add from '../add'
import Edit from '../edit'
import See from '../see'
import { Table, Button, Select, Space, Modal, Form, Input,message,Tooltip } from 'antd';
import axios from '../../../../../http/index'
import { ExclamationCircleOutlined } from '@ant-design/icons';

export default function Forms() {
    
    // 表格数据
    const [datas, usedatas] = useState([])
    // 表格的数据请求
    const seedata = () => {
        axios({
            method: "GET",
            url: '/system/coupon/couponmanagement/queryCoupon',
            params: {
                currentPage: 1,
                pageSize: 999,
            }
        })
            .then((res) => {
                console.log(res);
                let datas = res.data.data
                datas = datas.filter((item) => item.dynamic === 1)
                for (let i = 0; i < datas.length; i++) {
                    datas[i].key = datas[i].id
                }
                usedatas([...datas])
                console.log('ads', datas);
            })
            .catch((err) => {
                console.log(err);
            })
    }
    useEffect(() => {
        seedata()
    }, []);

    // 表格
    const columns = [
        {
            title: '编号',
            dataIndex: 'coupon_number',
            key: 'coupon_number',
            align: 'center',
            width: 70,
        },
        {
            title: '优惠券名称',
            dataIndex: 'chelpcenteroupon_name',
            key: 'chelpcenteroupon_name',
            align: 'center',
            width: 110,
            ellipsis: true,
        },
        {
            title: '优惠券类型',
            dataIndex: 'coupon_type',
            key: 'coupon_type',
            align: 'center',
            width: 110,
            render(text){
                return text === 1 ? '注册赠卷' : text === 2 ? '全场赠卷' : text === 3 ? '申贷赠卷' : '会员赠卷'
            }
            
        },
        {
            title: '可使用产品',
            dataIndex: 'usable_products',
            key: 'usable_products',
            align: 'center',
            width: 110,
            render(text){
                return text === 1 ? '全场通用' : text === 2 ? '指定产品' : '指定分类'
            }
        },
        {
            title: '使用门槛',
            dataIndex: 'use_threshold',
            key: 'use_threshold',
            align: 'center',
            width: 90,
        },
        {
            title: '面值',
            dataIndex: 'face_value',
            key: 'face_value',
            align: 'center',
            width: 80,
        },
        {
            title: '适用平台',
            dataIndex: 'applicable_platform',
            key: 'applicable_platform',
            align: 'center',
            width: 90,

            render(text){
                return text === 1 ? '全平台' : text === 2 ? 'PC端' :'移动端'
            }
        },
        {
            title: '有效期',
            dataIndex: 'term_validity',
            key: 'term_validity',
            align: 'center',
            width:100,
            render: (text)=><Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
            onCell: () => {
            return {
              style: {
                maxWidth: 150,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow:'ellipsis',
                cursor:'pointer'
              }
            } 
        }

        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
            align: 'center',
            width: 90,
            render(text){
                return text === 1 ? '以过期' : '未过期'
            }
        },
        {
            title: '操作',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            width: 180,
            render: text => <div><Space><Button size="small" onClick={() => see(text)}>查看</Button><Button size="small" onClick={() => edit(text)}>编辑</Button><Button size="small" type="dashed" danger onClick={() => dels(text)}>删除</Button></Space></div>,
        },
    ];
    const [seedatas,setseedatas] = useState({})
    // 查看
    const see = (text) => {
        console.log(text);
        let a = datas.filter((item) => item.id === text)
        setseedatas(() => a[0])
        setVisible3(true)
    }
    // 编辑
    const edit = (text) => {
        console.log(text);
        let a = datas.filter((item) => item.id === text) 
        setseedatas(() => a[0])
        setVisible2(true)
    }
    // 删除
    const { confirm } = Modal;
    const dels = (text) => {
        axios({
            method: "GET",
            url: '/system/coupon/couponmanagement/deleteCoupon',
            params: {
                dynamic:'2',
                id:String(text),
            }
        })
            .then((res) => {
                console.log(123,res);
                confirm({
                    title: '真的确认删除吗?',
                    icon: <ExclamationCircleOutlined />,
                    content: '删除之后将无法恢复!',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                      console.log('OK');
                      seedata()
                      if(res.data.code === 200){
                        message.success('删除成功');
                      }else{
                        message.error('删除出错');
                      }
                    },
                    onCancel() {
                      console.log('Cancel');
                    },
                  });
               
            })
            .catch((err) => {
                console.log(err);
                message.error('删除出错');
            })
    }
    // 搜索框
    const [da,setda] = useState({})
    const ada = () => {
        console.log(da);
        axios({
            method: "GET",
            url: '/system/coupon/couponmanagement/queryChelpcenterouponNameCouponType',
            params: {
               ...da
            }
        })
            .then((res) => {
                console.log(res);
                
            })
            .catch((err) => {
                console.log(err);
            })
    }
    const couponName = (e) => {
        if(e.target.value){
        setda({...da,chelpcenteroupon_name:e.target.value})
            console.log(e.target.value);
        }
        ada()
        console.log(da);
    }
    const gender = (e) => {
        setda({...da,coupon_type:e})
        ada()
        console.log(e);
    }
    // 排序
    const sort = (e) => {
        if(e === '1'){
            axios({
                method: "GET",
                url: '/system/coupon/couponmanagement/queryUseThresholdFaceValue',
                params:{
                    face_value:'1',
                    total_circulation :'',
                }
            })
                .then((res) => {
                    let datas = res.data.data
                    datas = datas.filter((item) => item.dynamic === 1)
                    for (let i = 0; i < datas.length; i++) {
                        datas[i].key = datas[i].id
                    }
                    usedatas(() => datas)
                    console.log('时间排序',res);
                    message.success('排序成功');
                })
                .catch((err) => {
                    console.log(err);
                })
        }else{
            axios({
                method: "GET",
                url: '/system/coupon/couponmanagement/queryUseThresholdFaceValue',
                params:{
                    face_value:'',
                    total_circulation :'1',
                }
            })
                .then((res) => {
                    let datas = res.data.data
                    datas = datas.filter((item) => item.dynamic === 1)
                    for (let i = 0; i < datas.length; i++) {
                        datas[i].key = datas[i].id
                    }
                    usedatas(() => datas)
                    console.log('时间排序',res);
                    message.success('排序成功');
                })
                .catch((err) => {
                    console.log(err);
                    message.error('排序失败');
                })
        }
       
    }
    // 添加弹窗
    const [visible, setVisible] = useState(false)
      // 传给添加弹窗的方法
      const close1 = () => {
        setVisible(false)
    }
    // 编辑
    const [visible2, setVisible2] = useState(false)
    
    // 传给编辑弹窗的方法
    const close2 = () => {
        setVisible2(false)
    }

    // 查看
    const [visible3, setVisible3] = useState(false)

    return (
        <div>
            <div className="boders">
                <Form
                    layout="inline"
                >
                    <Form.Item className="bg">
                        <span className="text">筛选查询</span>
                    </Form.Item>
                    <Form.Item label="优惠券名称" className="box22">
                        <Input placeholder="优惠券名称" onBlur={couponName} />
                    </Form.Item>
                    <Form.Item label="优惠券类型" className="box22">
                        <Select placeholder="请选择优惠券类型" onChange={gender} getPopupContainer={triggerNode => triggerNode.parentNode}>
                            <Select.Option value="1">注册赠卷</Select.Option>
                            <Select.Option value="2">全场赠卷</Select.Option>
                            <Select.Option value="3">申贷赠卷</Select.Option>
                            <Select.Option value="4">会员赠卷</Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </div>
            <div className="from">
                <div className="bg">
                    <span className="text">数据列表</span>

                    <div className="right">
                        <Button onClick={() => setVisible(true)}>添加优惠券</Button>
                        <Select placeholder="请选择排序方式" style={{width:150}} onChange={sort} getPopupContainer={triggerNode => triggerNode.parentNode}>
                            <Select.Option value="1">面值</Select.Option>
                            <Select.Option value="2">使用门槛</Select.Option>
                        </Select>
                    </div>
                </div>
                </div>
                <div>
                <Table bordered columns={columns} dataSource={datas} />
                </div>
                    <Modal
                    getContainer={false}
                    title="添加优惠券"
                    centered
                    visible={visible}
                    onOk={() => setVisible(false)}
                    onCancel={() => setVisible(false)}
                    width={800}
                    footer={null}
                >
                    <Add close1={close1} seedata={seedata}/>
                </Modal>

                <Modal
                    getContainer={false}
                    title="编辑优惠券"
                    centered
                    visible={visible2}
                    onOk={() => setVisible2(false)}
                    onCancel={() => setVisible2(false)}
                    width={800}
                    footer={null}
                >
                    <Edit seedatas={seedatas} close2={close2} seedata={seedata}/>
                </Modal>

                <Modal
                    getContainer={false}
                    title="优惠券明细"
                    centered
                    visible={visible3}
                    onOk={() => setVisible3(false)}
                    onCancel={() => setVisible3(false)}
                    width={1200}
                    footer={null}
                >
                    <See seedatas={seedatas}/>
                </Modal>

        </div>
    )
}
